<template>
  <div class="enroll-box">
    <el-row :gutter="0">
      <el-col id="contain" class="el-col">
        <h1>欢迎加入比特巅峰!</h1>
        <div class="el-form">
          <el-form :model="form" ref="form" :rules="rules" label-width="70px" class="demo-ruleForm">
            <!-- 姓名 -->
            <el-form-item label="姓名" prop="name">
              <el-input type="text" v-model.trim="form.name" autocomplete="off" autofocus="true" clearable></el-input>
            </el-form-item>
            <!-- 学号 -->
            <el-form-item label="学号" prop="num">
              <el-input type="text" v-model.trim="form.num" autocomplete="off" clearable></el-input>
            </el-form-item>
            <!-- 邮箱 -->
            <el-form-item label="邮箱" prop="email">
              <el-input type="email" v-model.trim="form.email" autocomplete="off" clearable></el-input>
            </el-form-item>
            <!-- 性别 -->
            <el-form-item label="性别" prop="radio">
              <el-radio v-model="form.radio" label="1">男</el-radio>
              <el-radio v-model="form.radio" label="2">女</el-radio>
            </el-form-item>
            <!-- 专业 -->
            <el-form-item label="专业" prop="major">
              <el-input suffix-icon type="text" v-model.trim="form.major" placeholder="网络工程" autocomplete="off" clearable></el-input>
            </el-form-item>
            <!-- 班级 -->
            <el-form-item label="班级" prop="classroom">
              <el-input type="text" v-model.trim="form.classroom" autocomplete="off" placeholder="网络22-1" clearable></el-input>
            </el-form-item>
            <!-- 方向 -->
            <el-form-item label="方向" prop="value">
              <el-select v-model="form.value" placeholder="请选择">
                <el-option v-for="item in form.options" :key="item.value" :label="item.label" :value="item.value" clearable> </el-option>
              </el-select>
            </el-form-item>
            <!-- 个人优势 -->
            <el-form-item label="个人优势">
              <el-input type="textarea" placeholder="请输入内容" v-model.trim="form.textarea" maxlength="120" show-word-limit resize="none" rows="5" clearable> </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('form')">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!-- 底下文本 -->
    <span class="text"><img src="@/assets/img/lab_logo.png" alt="" title="比特巅峰"> BIT SUMMIT · 2022</span>
  </div>
</template>

<script>
export default {
  name: 'Enroll',
  data() {
    // 对学号自定义验证
    var validateNum = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入学号'))
      } else if (!/^[0-9]{11}$/.test(value)) {
        // 用正则判断学号是否为11位数字
        callback(new Error('请检查学号是否正确'))
      } else {
        callback()
      }
    }
    // 对邮箱验证
    var validateEmail = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入邮箱'))
      } else if (!/^^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$$/.test(value)) {
        // 用正则判断邮箱格式
        callback(new Error('邮箱格式错误'))
      } else {
        callback()
      }
    }

    return {
      form: {
        // 姓名
        name: '',
        // 学号
        num: '',
        // 邮箱
        email: '',
        // 班级
        classroom: '',
        // 专业
        major: '',
        // 个人优势
        textarea: '',
        // 方向选择
        options: [
          {
            value: '选项1',
            label: '前端'
          },
          {
            value: '选项2',
            label: 'Java'
          },
          {
            value: '选项3',
            label: 'python'
          },
          {
            value: '选项4',
            label: '硬件'
          },
          {
            value: '选项5',
            label: 'C++'
          },
          {
            value: '选项6',
            label: '视觉传达'
          },
          {
            value: '选项7',
            label: '待分配'
          }
        ],
        value: '',
        // 性别
        radio: ''
      },
      //

      rules: {
        // 姓名校验
        name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
        // 学号校验
        num: [
          // { required: true, message: '请输入学号', trigger: 'blur' },
          { required: true, validator: validateNum, trigger: 'blur' }
        ],
        // 邮箱校验
        email: [{ required: true, validator: validateEmail, trigger: 'blur' }],
        // 方向校验
        value: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        // 专业校验
        major: [{ required: true, message: '请填写专业', trigger: 'blur' }],
        // 班级校验
        classroom: [{ required: true, message: '请填写班级', trigger: 'blur' }],
        // 性别校验
        radio: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 对整个表单进行校验
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert('submit!')
          // 校验成功
          console.log(valid)
        } else {
          // 未满足校验规则
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "assets/css/_content.scss";



.enroll-box {
  .el-col {
    margin-top: 25px;
    transition: all 0.3s ease;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 2px 2px 10px #ccc;
    &:hover {
      box-shadow: 0px 0px 30px #ccc;
    }
     /* 表单标题 */
  h1 {
    font-size: 25px;
    color: #518dc4;
    text-align: center;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  }
    .el-form {
      // 修改form表单内边距
      padding: 5px 20px 0px 5px;
      /* 清除表单默认样式 */
      /deep/ .el-form-item.is-error .el-input__inner {
        border-color: #dcdfe6;
      }
      /deep/ .el-input__inner {
        border-color: #dcdfe6;
      }
      // 提交按钮
      .el-button {
        width: 120px;
        background-color: #518dc4;
      }
      .el-form-item:last-of-type {
        // 让提交按钮向右靠
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  /* 表单底下文本 */
  .text {
    display: inline-block;
    position: relative;
    bottom: -6px;
    left: 50%;
    padding-left: 25px;
    transform: translateX(-50%);
    font-size: 10px;
    color: #9a9eac;
    overflow: hidden;
    /* 实验室logo */
    img {
      position: absolute;
      bottom: -3px;
      left: 0px;
      width: 20px;
    }
  }
  
}

// 屏幕宽度小于550px时，表单宽度为100%
@media screen and (max-width: 550px) {
  #contain {
    width: 100%;
    margin-top: 0px;
    border-radius: 0px;
  }
}
// 屏幕宽度大于550px时，表单宽度固定
@media screen and (min-width: 550px) {
  #contain {
    width: 550px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

</style>
